<template>
  <div class="content-box">
    <div class="content">
      <div class="group">
        <div class="header">
          <div class="title">卡类型</div>
        </div>
        <div class="table-box" v-loading="loading">
          <ProTable
            ref="proTable"
            title="卡类列表"
            rowKey="ctcode"
            :columns="columns"
            :pagination="false"
            :tool-button="false"
            :request-api="getTableList"
            :data-callback="dataCallback"
            :select="_select"
            :click-row="_clickRow"
            :all-select-disabled="true"
          >
            <!-- Expand -->
            <template #expand="scope">
              {{ scope.row }}
            </template>
          </ProTable>
        </div>
      </div>
      <div class="main">
        <div class="header">
          <div class="title">{{ form.ctname }}</div>
        </div>

        <el-form ref="formRef" class="form" :model="form">
          <el-form-item label="消费">
            <el-switch v-model="form.bpos" style="--el-switch-on-color: #54bcbd" />
          </el-form-item>
          <el-form-item label="补贴">
            <el-switch v-model="form.bsub" style="--el-switch-on-color: #54bcbd" />
          </el-form-item>
          <el-form-item label="考勤">
            <el-switch v-model="form.btimer" style="--el-switch-on-color: #54bcbd" />
          </el-form-item>
          <el-form-item label="门禁">
            <el-switch v-model="form.baccess" style="--el-switch-on-color: #54bcbd" />
          </el-form-item>
          <el-form-item label="访客">
            <el-switch v-model="form.bvisitor" style="--el-switch-on-color: #54bcbd" />
          </el-form-item>
          <el-form-item label="巡更">
            <el-switch v-model="form.bpatrol" style="--el-switch-on-color: #54bcbd" />
          </el-form-item>
          <el-form-item label="会议">
            <el-switch v-model="form.bmeeting" style="--el-switch-on-color: #54bcbd" />
          </el-form-item>
        </el-form>
        <div class="footer">
          <el-button type="primary" @click="_save" :loading="loading1">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="tsx" name="cardManage">
import { ElMessage } from "element-plus";
import { ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { getCardTypeList, saveCardType } from "@/api/modules/cardIssuingCenter/cardTypeManage";
const formRef = ref();
const proTable = ref();
const form = ref({
  ctname: "",
  bpos: false,
  bsub: false,
  btimer: false,
  baccess: false,
  bvisitor: false,
  bpatrol: false,
  bmeeting: false
});
const loading = ref(false);
const loading1 = ref(false);
const isInit = ref(true);

const dataCallback = (data: any) => {
  loading.value = false;
  if (isInit.value) {
    form.value = data[0];
    proTable.value.element.toggleRowSelection(data[0], true);
  }
  isInit.value = false;
  return {
    list: data
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  loading.value = true;
  return getCardTypeList({ ...newParams });
};

const columns = [
  { type: "selection", fixed: "left", width: 60 },
  {
    prop: "ctcode",
    label: "卡类代码"
  },
  {
    prop: "ctname",
    label: "卡类名称"
  }
];

/**
 * 多选框选择
 */
const _select = (selection, row) => {
  const selectedList = proTable.value.element.getSelectionRows();
  const isSel = selectedList.some(item => item.ctcode === row.ctcode);
  const lastSelItem = selection.shift();
  if (selection.length) {
    proTable.value.element.toggleRowSelection(lastSelItem, false);
  }
  form.value = isSel ? row : {};
  // proTable.value.getTableList();
};

/**
 * 单击行
 */
const _clickRow = row => {
  const selectedList = proTable.value.element.getSelectionRows();
  const isSel = selectedList.some(item => item.ctcode === row.ctcode);
  proTable.value.clearSelection();
  proTable.value.element.toggleRowSelection(row, isSel ? false : true);
  form.value = !isSel ? row : {};
  // proTable.value.getTableList();
};

/**
 * 保存卡类权限
 */
const _save = async () => {
  loading1.value = true;
  try {
    await saveCardType({ ...form.value });
    ElMessage.success("保存成功");
    loading1.value = false;
  } catch (error) {
    loading1.value = false;
    console.log(error);
  }
};
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
